<script setup>
  import { RouterLink, RouterView } from 'vue-router';
  import logo from '@/assets/logo.svg';
  import { reactive, computed, watch, ref, onMounted, useTemplateRef } from 'vue';
  import 眼睛_显示 from '@/assets/icon/眼睛_显示.svg';
  import 眼睛_隐藏 from '@/assets/icon/眼睛_隐藏.svg';
  import 骰子 from '@/assets/icon/骰子.svg';
  import 太阳 from '@/assets/icon/太阳.svg';
  import randomTool from '@/js/randomTool';
  import userTool from '@/js/userTool';
  import ViewUsefWebs from '@/views/ViewUsefWebs.vue';
  import ViewTodayHot from '@/views/ViewTodayHot.vue';
  import ViewComnTool from '@/views/ViewComnTool.vue';
  import ViewRecoIdea from '@/views/ViewRecoIdea.vue';
  import ViewWebLog from '@/views/ViewWebLog.vue';
  import utilTool from '@/js/utilTool';

  const isShowLoginTable = ref(false);

  const showPanel = ref('ViewUsefWebs');

  const realUser = ref({
    id: '',
    name: '访客',
    level: '0',
  });

  const user = ref({
    id: '',
    name: '',
    password: '',
  });

  const tableType = ref('login');
  const inputType = ref('password');
  const eye = ref(眼睛_隐藏);
  const dice = ref(骰子);
  const sun = ref(太阳);

  onMounted(() => {
    userTool.getUserInfo(realUser);
    // let sp = sessionStorage.getItem('showPanel');
    // if (['ViewUsefWebs', 'ViewTodayHot', 'ViewComnTool', 'ViewRecoIdea', 'ViewWebLog'].includes(sp)) {
    //   changeShowPanel(sp);
    // }
  });

  function login() {
    userTool.login(user, realUser, callback);
  }

  function sign() {
    if (user.value.name == '') {
      alert('名称不能为空');
    }
    userTool.sign(user, realUser, callback);
  }

  const ViewUsefWebsRef = useTemplateRef('ViewUsefWebsRef');
  const ViewRecoIdeaRef = useTemplateRef('ViewRecoIdeaRef');
  const ViewWebLogRef = useTemplateRef('ViewWebLogRef');

  function exit() {
    userTool.exit();
    realUser.value.id = '';
    realUser.value.name = '访客';
    realUser.value.level = '0';
    console.log(showPanel.value);
    if (showPanel.value == 'ViewUsefWebs') {
      ViewUsefWebsRef.value.refresh(1);
    }
    if (showPanel.value == 'ViewRecoIdea') {
      ViewRecoIdeaRef.value.refresh(1);
    }
    if (showPanel.value == 'ViewWebLog') {
      ViewWebLogRef.value.refresh(1);
    }
  }

  function reset() {
    user.value.id = '';
    user.value.name = '';
    user.value.password = '';
    inputType.value = 'password';
    eye.value = 眼睛_隐藏;
  }

  function openTable() {
    isShowLoginTable.value = true;
    tableType.value = 'login';
    reset();
  }

  function callback() {
    closeTable();
    console.log(showPanel.value);
    console.log(showPanel.value);
    if (showPanel.value == 'ViewUsefWebs') {
      ViewUsefWebsRef.value.refresh(1);
    }
    if (showPanel.value == 'ViewRecoIdea') {
      ViewRecoIdeaRef.value.refresh(1);
    }
    if (showPanel.value == 'ViewWebLog') {
      ViewWebLogRef.value.refresh(1);
    }
  }

  function closeTable() {
    isShowLoginTable.value = false;
    reset();
  }

  function toSign() {
    tableType.value = 'sign';
    reset();
    randomId();
    randomName();
  }

  function toLogin() {
    tableType.value = 'login';
    reset();
  }

  function randomId() {
    user.value.id = randomTool.getRandomId(16);
  }

  function randomName() {
    user.value.name = randomTool.getRandomName();
  }

  function changeShowPanel(sp) {
    showPanel.value = sp;
  }
</script>

<template>
  <div class="top_panel color_white card_N1">
    <div style="width: 5vw">
      <img class="logo" :src="logo" alt="logo" />
    </div>
    <div class="text_H1" style="width: 75vw">{{ realUser.name }}</div>
    <div class="text_H1" style="width: 5vw">
      <button class="button_N10" v-on:click="utilTool.changeTheme()">
        <img class="img" :src="sun" />
      </button>
    </div>

    <button v-if="realUser.id == ''" class="button_N1 text_H3" v-on:click="openTable">登录</button>
    <button v-else class="button_N1 text_H3" v-on:click="exit">登出</button>
  </div>
  <div class="left_panel color_white card_N1">
    <div
      class="text_H3"
      :class="showPanel == 'ViewUsefWebs' ? 'button_N2_selected' : 'button_N2'"
      v-on:click="changeShowPanel('ViewUsefWebs')"
    >
      实用网站
    </div>
    <div
      class="text_H3"
      :class="showPanel == 'ViewTodayHot' ? 'button_N2_selected' : 'button_N2'"
      v-on:click="changeShowPanel('ViewTodayHot')"
    >
      今日热点
    </div>
    <div
      class="text_H3"
      :class="showPanel == 'ViewComnTool' ? 'button_N2_selected' : 'button_N2'"
      v-on:click="changeShowPanel('ViewComnTool')"
    >
      站内应用
    </div>
    <div
      class="text_H3"
      :class="showPanel == 'ViewRecoIdea' ? 'button_N2_selected' : 'button_N2'"
      v-on:click="changeShowPanel('ViewRecoIdea')"
    >
      文章随笔
    </div>
    <div
      class="text_H3"
      :class="showPanel == 'ViewWebLog' ? 'button_N2_selected' : 'button_N2'"
      v-on:click="changeShowPanel('ViewWebLog')"
    >
      网站日志
    </div>
  </div>
  <div class="right_panel">
    <ViewUsefWebs ref="ViewUsefWebsRef" v-if="showPanel == 'ViewUsefWebs'"></ViewUsefWebs>
    <ViewTodayHot ref="ViewTodayHotRef" v-else-if="showPanel == 'ViewTodayHot'"></ViewTodayHot>
    <ViewComnTool ref="ViewComnToolRef" v-else-if="showPanel == 'ViewComnTool'"></ViewComnTool>
    <ViewRecoIdea ref="ViewRecoIdeaRef" v-else-if="showPanel == 'ViewRecoIdea'"></ViewRecoIdea>
    <ViewWebLog ref="ViewWebLogRef" v-else-if="showPanel == 'ViewWebLog'"></ViewWebLog>
  </div>

  <div class="screenShadow" v-show="isShowLoginTable">
    <div class="LoginTable">
      <div v-if="tableType == 'login'">
        <div class="button_N3" style="margin-top: 1%; margin-left: 93%; cursor: pointer" v-on:click="closeTable">×</div>
        <div class="text_H1" style="margin-top: 1%; margin-left: 20%">欢迎</div>
        <input
          class="input_N1 text_H6"
          style="margin-top: 8%; margin-left: 20%"
          v-model="user.id"
          placeholder="账号"
          maxlength="16"
        />
        <input
          :type="inputType"
          class="input_N1 text_H6"
          style="margin-top: 5%; margin-left: 20%"
          v-model="user.password"
          placeholder="密码"
          maxlength="16"
        /><img
          class="img icon"
          :src="eye"
          v-on:click="
            eye = eye == 眼睛_显示 ? 眼睛_隐藏 : 眼睛_显示;
            inputType = inputType == 'text' ? 'password' : 'text';
          "
        />
        <button class="button_N4 text_H3" style="margin-top: 20%; margin-left: 20%" v-on:click="login">登录</button>
        <button class="button_N5 text_H3" style="margin-top: 5%; margin-left: 20%" v-on:click="reset">清空</button>
        <button class="button_N5 text_H3" style="margin-top: 5%; margin-left: 4%" v-on:click="toSign">去注册</button>
      </div>
      <div v-else-if="tableType == 'sign'">
        <div class="text_H2" style="margin-top: 1%; margin-left: 93%; cursor: pointer" v-on:click="closeTable">×</div>
        <div class="text_H1" style="margin-top: 1%; margin-left: 20%">你好</div>
        <input
          class="input_N1 text_H6"
          style="margin-top: 8%; margin-left: 20%"
          v-model="user.id"
          placeholder="账号"
          maxlength="16"
        /><img class="img icon" :src="dice" v-on:click="randomId" />
        <input
          class="input_N1 text_H6"
          style="margin-top: 5%; margin-left: 20%"
          v-model="user.name"
          placeholder="用户名"
          maxlength="16"
        /><img class="img icon" :src="dice" v-on:click="randomName" />
        <input
          :type="inputType"
          class="input_N1 text_H6"
          style="margin-top: 5%; margin-left: 20%"
          v-model="user.password"
          placeholder="密码"
          maxlength="16"
        /><img
          class="img icon"
          :src="eye"
          v-on:click="
            eye = eye == 眼睛_显示 ? 眼睛_隐藏 : 眼睛_显示;
            inputType = inputType == 'text' ? 'password' : 'text';
          "
        />
        <button class="button_N4 text_H3" style="margin-top: 10%; margin-left: 20%" v-on:click="sign">注册</button>
        <button class="button_N5 text_H3" style="margin-top: 5%; margin-left: 20%" v-on:click="reset">清空</button>
        <button class="button_N5 text_H3" style="margin-top: 5%; margin-left: 4%" v-on:click="toLogin">去登录</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .top_panel {
    position: fixed;
    height: 4rem;
    left: 0rem;
    right: 0rem;
    padding-left: 2vw;
    padding-left: 2vw;
    display: flex;
    flex-direction: row; /* 方向：| row | row-reverse | column | column-reverse; */
    flex-wrap: nowrap; /* 换行：| nowrap | wrap | wrap-reverse; */
    justify-content: flex-start; /*横向对齐方式 | flex-start | flex-end | center | space-between | space-around | space-evenly;*/
    align-items: center; /*纵向对齐方式 | stretch | flex-start | flex-end | center | baseline; */
    z-index: 100;
  }

  .left_panel {
    position: fixed;
    width: 12vw;
    top: 4.5rem;
    bottom: 0.5rem;
    left: 0.5vw;
    z-index: 100;
    padding-top: 1rem;
    display: flex;
    flex-direction: column; /* 方向：| row | row-reverse | column | column-reverse; */
    flex-wrap: nowrap; /* 换行：| nowrap | wrap | wrap-reverse; */
    justify-content: flex-start; /*横向对齐方式 | flex-start | flex-end | center | space-between | space-around | space-evenly;*/
    align-items: center; /*纵向对齐方式 | stretch | flex-start | flex-end | center | baseline; */
  }

  .right_panel {
    position: absolute;
    width: auto;
    top: 5rem;
    left: 18vw;
    right: 0.5rem;
  }

  .logo {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }

  .LoginTable {
    background-color: var(--color-text-white);
    position: fixed;
    height: 30rem;
    top: 6rem;
    left: 30vw;
    right: 30vw;
    z-index: 200;
    border-radius: 0.3rem;
  }
</style>
